<template>
  <view class="container">
    <!-- 订单状态 -->
    <view class="status-section">
      <view class="status-info">
        <text class="status-text" :class="getStatusClass(order.status)">{{ order.statusText }}</text>
        <text class="status-desc">{{ getStatusDesc(order.status) }}</text>
        <!-- 倒计时显示 -->
        <view class="countdown-container" v-if="showCountdown">
          <view class="countdown-info">
            <text class="countdown-label">支付剩余时间：</text>
            <text class="countdown-time">{{ formatCountdown }}</text>
          </view>
          <view class="refresh-payment-section">
            <text class="refresh-hint">若已支付，请点击按钮获取订单最新支付状态</text>
            <button class="refresh-btn" @click="refreshPaymentStatus" :disabled="refreshing">
              <text class="refresh-icon" :class="{ rotating: refreshing }">🔄</text>
              <text class="refresh-text">{{ refreshing ? '刷新中...' : '刷新状态' }}</text>
            </button>
          </view>
        </view>
      </view>

      <!-- 配送进度 -->
      <view class="delivery-progress"
        v-if="order.deliveryType === 1 && (order.status === 2 || order.status === 3 || order.status === 4)">
        <view class="progress-item" :class="{ active: order.status >= 2 }">
          <view class="progress-dot"></view>
          <text class="progress-text">等待商家接单</text>
          <text class="progress-time" v-if="order.status >= 2">{{ formatTime(order.payTime) }}</text>
        </view>
        <view class="progress-line" :class="{ active: order.status >= 2 }"></view>

        <view class="progress-item" :class="{ active: order.status >= 3 }">
          <view class="progress-dot"></view>
          <text class="progress-text">配送员取餐中</text>
          <text class="progress-time" v-if="order.status >= 3">{{ formatTime(order.deliveryTime) }}</text>
        </view>
        <view class="progress-line" :class="{ active: order.status >= 3 }"></view>

        <view class="progress-item" :class="{ active: order.status >= 4 }">
          <view class="progress-dot"></view>
          <text class="progress-text">已送达</text>
          <text class="progress-time" v-if="order.status >= 4">{{ formatTime(order.finishTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 配送信息 -->
    <view class="delivery-section" v-if="order.deliveryType === 1">
      <view class="section-title">配送信息</view>
      <view class="delivery-address">
        <view class="address-icon">📍</view>
        <view class="address-info">
          <view class="address-header">
            <text class="address-name">{{ order.receiverName }}</text>
            <text class="address-phone">{{ order.receiverPhone }}</text>
          </view>
          <text class="address-detail">{{ order.deliveryAddress }}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-section">
      <view class="section-title">订单信息</view>
      <view class="order-info">
        <view class="info-item">
          <text class="info-label">订单编号</text>
          <view class="info-value-copy">
            <text class="info-value">{{ order.id }}</text>
            <text class="copy-btn" @click="copyOrderId">复制</text>
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">下单时间</text>
          <text class="info-value">{{ order.createTime }}</text>
        </view>
        <view class="info-item" v-if="order.payTime">
          <text class="info-label">支付时间</text>
          <text class="info-value">{{ order.payTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">配送方式</text>
          <text class="info-value">{{ getDeliveryTypeText(order.deliveryType) }}</text>
        </view>
        <view class="info-item" v-if="order.remark">
          <text class="info-label">备注</text>
          <text class="info-value">{{ order.remark }}</text>
        </view>
        <view class="info-item" v-if="order.deliveryType === 1">
          <text class="info-label">预约送达时间</text>
          <text class="info-value">{{ order.deliveryTimeType === 1 ? '尽快送达' : order.scheduleTime }}</text>
        </view>
      </view>
    </view>

    <!-- 商家和商品信息 -->
    <view class="merchant-section">
      <view class="merchant-info">
        <image class="merchant-logo" :src="order.merchantLogo" mode="aspectFill"></image>
        <text class="merchant-name">{{ order.merchantName }}</text>
      </view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in order.goods" :key="index">
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-specs" v-if="item.specifications">{{ formatSpecifications(item.specifications) }}</text>
          </view>
          <view class="goods-price-info">
            <text class="goods-quantity">x{{ item.quantity }}</text>
            <text class="goods-price">¥{{ item.subtotal?.toFixed(2) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="price-section">
      <view class="price-item">
        <text>商品金额</text>
        <text>¥{{ order.originalPrice?.toFixed(2) }}</text>
      </view>
      <view class="price-item" v-if="order.deliveryFee > 0">
        <text>配送费</text>
        <text>¥{{ order.deliveryFee?.toFixed(2) }}</text>
      </view>
      <view class="price-item" v-if="order.totalPackagingFee > 0">
        <text>打包费</text>
        <text>¥{{ order.totalPackagingFee?.toFixed(2) }}</text>
      </view>
      <view class="price-item" v-if="order.discount > 0">
        <text>优惠</text>
        <text class="discount">-¥{{ order.discount?.toFixed(2) }}</text>
      </view>
      <view class="price-total">
        <text>实付款</text>
        <text class="total-price">¥{{ order.actualPay?.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 联系按钮 -->
    <view class="contact-section" v-if="order.status === 2 || order.status === 3">
      <contact-buttons :merchant-phone="order.merchantPhone"
        :rider-phone="order.status === 3 ? order.riderPhone : ''" />
    </view>

    <!-- 底部操作按钮 -->
    <view class="footer">
      <view class="action-btns">
        <button class="action-btn" v-if="order.status === 1 || order.status === 2" @click="showCancelModal">取消订单</button>
        <button class="action-btn" v-if="order.status === 1" @click="payOrder">去支付</button>

        <button class="action-btn primary" v-if="order.status === 4" @click="reorder">再来一单</button>
      </view>
    </view>

    <!-- 取消订单原因选择弹窗 -->
    <CancelOrderModal 
      :visible="cancelModalVisible" 
      @cancel="handleCancelModalClose" 
      @confirm="handleCancelConfirm" 
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderDetail, cancelOrder as cancelUserOrder, createWechatPayOrder, refreshPaymentStatus as refreshPaymentStatusApi } from '@/api/order.js';
import ContactButtons from '@/components/ContactButtons.vue'
import CancelOrderModal from '@/components/CancelOrderModal.vue'
import { formatTime } from '@/utils/time.js'
import { getGoodsListByOrderId } from "@/api/goods.js";
import { useCartStore } from '@/store/cart.js';

// 响应式状态
const orderId = ref('')
const order = ref({})
const cartStore = useCartStore();
const cancelModalVisible = ref(false) // 取消订单弹窗显示状态

// 倒计时相关状态
const countdown = ref(0) // 剩余秒数
const countdownTimer = ref(null)
const refreshing = ref(false) // 刷新支付状态中
const showCountdown = computed(() => {
  return order.value.status === 1 && countdown.value > 0
})

// 格式化倒计时显示
const formatCountdown = computed(() => {
  if (countdown.value <= 0) return '00:00'
  const minutes = Math.floor(countdown.value / 60)
  const seconds = countdown.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 启动倒计时
const startCountdown = () => {
  if (order.value.status !== 1 || !order.value.createTime) return

  const createTime = new Date(order.value.createTime).getTime()
  const timeoutTime = createTime + 15 * 60 * 1000 // 15分钟后

  const updateCountdown = () => {
    const now = Date.now()
    const remaining = Math.max(0, Math.floor((timeoutTime - now) / 1000))
    countdown.value = remaining

    if (remaining <= 0) {
      clearInterval(countdownTimer.value)
      countdownTimer.value = null
      // 倒计时结束，提示用户刷新页面
      uni.showModal({
        title: '订单超时',
        content: '订单支付时间已超时，请刷新页面查看最新状态',
        showCancel: true,
        confirmText: '刷新页面',
        success: (res) => {
          if (res.confirm) {
            loadOrderDetail()
          }
        }
      })
    }
  }

  updateCountdown()
  countdownTimer.value = setInterval(updateCountdown, 1000)
}

// 停止倒计时
const stopCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
  }
}

const formatSpecifications = (specsStr) => {
  try {
    const specs = JSON.parse(specsStr);
    if (!Array.isArray(specs)) return specsStr;
    return specs.map(spec => spec.value).join(',');
  } catch (e) {
    return specsStr; // 如果不是JSON格式，直接返回原字符串
  }
};


/**
 * 加载订单详情
 */
const loadOrderDetail = async () => {
  const res = await getOrderDetail(orderId.value)
  const foundOrder = res.data
  if (foundOrder) {
    order.value = foundOrder

    // 如果是待付款状态，启动倒计时
    if (foundOrder.status === 1) {
      startCountdown()
    } else {
      stopCountdown()
    }
  } else {
    uni.showToast({
      title: '订单不存在',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
}

/**
 * 获取订单状态对应的样式类
 * @param {number} status - 订单状态
 * @returns {string} - 样式类名
 */
const getStatusClass = (status) => {
  const classMap = {
    1: 'status-pending',
    2: 'status-processing',
    3: 'status-delivering',
    4: 'status-completed',
    5: 'status-canceled'
  }
  return classMap[status] || ''
}

/**
 * 获取订单状态描述
 * @param {number} status - 订单状态
 * @returns {string} - 状态描述
 */
const getStatusDesc = (status) => {
  const descMap = {
    1: '等待支付',
    2: '等待商家接单',
    3: '配送员正在配送中',
    4: '订单已完成',
    5: '订单已取消'
  }
  return descMap[status] || ''
}

/**
 * 获取配送方式文本
 * @param {number} type - 配送类型
 * @returns {string} - 配送方式文本
 */
const getDeliveryTypeText = (type) => {
  const typeMap = {
    1: '外卖配送',
    2: '堂食',
    3: '到店自取'
  }
  return typeMap[type] || ''
}



/**
 * 复制订单ID
 */
const copyOrderId = () => {
  uni.setClipboardData({
    data: order.value.id,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

/**
 * 显示取消订单弹窗
 */
const showCancelModal = () => {
  cancelModalVisible.value = true
}

/**
 * 关闭取消订单弹窗
 */
const handleCancelModalClose = () => {
  cancelModalVisible.value = false
}

/**
 * 确认取消订单
 */
const handleCancelConfirm = async (cancelReason) => {
  try {
    uni.showLoading({ title: '处理中...' });
    await cancelUserOrder(orderId.value, cancelReason);
    uni.hideLoading();
    
    uni.showToast({
      title: '订单已取消',
      icon: 'success'
    });
    
    // 关闭弹窗
    cancelModalVisible.value = false
    
    // 延迟1.5秒后刷新订单详情，确保用户能看到取消成功的提示
    setTimeout(() => {
      loadOrderDetail();
    }, 1500);
  } catch (e) {
    console.error('取消订单异常', e);
    uni.hideLoading();
    uni.showToast({
      title: '取消订单失败，请重试',
      icon: 'none'
    });
  }
}

/**
 * 支付订单
 */
const payOrder = async () => {
  uni.showLoading({
    title: '正在支付...'
  })

  try {
    // 调用创建微信支付订单接口
    const payRes = await createWechatPayOrder(orderId.value)

    const payData = payRes.data

    // 调用微信支付
    uni.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.packageVal,
      signType: payData.signType,
      paySign: payData.paySign,
      success: (payResult) => {
        console.log('支付成功:', payResult)
        uni.hideLoading()

        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })

        // 重新加载订单详情
        loadOrderDetail()
      },
      fail: (payError) => {
        console.error('支付失败:', payError)
        uni.hideLoading()
        uni.showToast({
          title: '支付失败，请重试',
          icon: 'none'
        })
      }
    })
  } catch (payError) {
    console.error('创建支付订单失败:', payError)
    uni.hideLoading()
    uni.showToast({
      title: '支付失败，请重试',
      icon: 'none'
    })
  }
}



/**
 * 刷新微信支付状态
 */
const refreshPaymentStatus = async () => {
  if (refreshing.value) return

  refreshing.value = true
  try {
    const res = await refreshPaymentStatusApi(orderId.value)
    // 更新订单信息
    order.value = res.data

    // 如果订单状态已经不是待付款，停止倒计时
    if (res.data.status !== 1) {
      stopCountdown()
      uni.showToast({
        title: '支付状态已更新',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '订单仍为待支付状态',
        icon: 'none'
      })
    }
  } catch (e) {
    console.error('刷新支付状态失败', e)
    uni.showToast({
      title: '刷新失败，请重试',
      icon: 'none'
    })
  } finally {
    refreshing.value = false
  }
}

/**
 * 再来一单
 */
const reorder = async () => {
  uni.showLoading({ title: '处理中...' });
  try {
    // 获取商品列表
    const orderGoodsVoListRes = await getGoodsListByOrderId(orderId.value);
    const orderGoodsVoList = orderGoodsVoListRes.data;
    //遍历goodsList
    for (const orderGoodsVo of orderGoodsVoList) {
      const selectedSpecifications = [];
      if (orderGoodsVo.orderGoods.specifications) {
        const specifications = JSON.parse(orderGoodsVo.orderGoods.specifications);
        for (const spec of specifications) {
          selectedSpecifications.push({
            name: spec.name,
            value: spec.value,
            price: spec.price
          });
        }
      }
      // 添加到购物车
      cartStore.addToCart(orderGoodsVo.goods, selectedSpecifications, orderGoodsVo.orderGoods.quantity);
    }

  } catch (e) {
    console.error('添加到购物车失败', e);
    uni.showToast({
      title: '添加到购物车失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
  uni.showToast({
    title: '已加入购物车',
    icon: 'success'
  });
  // 跳转到商家页面
  setTimeout(() => {
    uni.navigateTo({
      url: `/pages/merchant/detail?id=${order.value.merchantId}`
    });
  }, 1500);
};


// 页面加载时初始化数据
onLoad((options) => {
  console.log("onLoad options===", options);

  orderId.value = options?.id || ''
  loadOrderDetail()
})

// 页面卸载时清理定时器
onUnmounted(() => {
  stopCountdown()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fafafa;
  background-image: linear-gradient(to bottom, #fff8f8, #fafafa);
  padding-bottom: 130rpx;
}

.status-section {
  background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
  color: #fff;
  padding: 50rpx 30rpx 40rpx;
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.15);
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -80rpx;
    right: -80rpx;
    width: 240rpx;
    height: 240rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: -50rpx;
    left: -50rpx;
    width: 180rpx;
    height: 180rpx;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
  }

  .status-info {
    margin-bottom: 30rpx;
    position: relative;
    z-index: 2;

    .status-text {
      font-size: 38rpx;
      font-weight: 600;
      margin-bottom: 12rpx;
      display: block;
      letter-spacing: 1rpx;
    }

    .status-desc {
      font-size: 28rpx;
      opacity: 0.9;
      letter-spacing: 0.5rpx;
    }

    .countdown-container {
      margin-top: 16rpx;
      padding: 16rpx 20rpx;
      background: linear-gradient(135deg, #fff5f5, #ffe8e8);
      border-radius: 20rpx;
      border: 1px solid #ffcdd2;
      display: flex;
      flex-direction: column;
      gap: 12rpx;

      .countdown-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;

        .countdown-label {
          font-size: 30rpx;
          color: #666;
        }

        .countdown-time {
          font-size: 36rpx;
          color: #ff6b6b;
          font-weight: 600;
          font-family: 'Courier New', monospace;
        }
      }

      .refresh-payment-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;

        .refresh-hint {
          font-size: 28rpx;
          color: #666;
          text-align: center;
          line-height: 1.4;
        }

        .refresh-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4rpx;
          padding: 6rpx 12rpx;
          background: linear-gradient(135deg, #4CAF50, #45a049);
          color: #fff;
          border: none;
          border-radius: 12rpx;
          font-size: 22rpx;
          transition: all 0.3s ease;
          min-width: 100rpx;

          &:disabled {
            background: linear-gradient(135deg, #ccc, #bbb);
            opacity: 0.7;
          }

          &:not(:disabled):active {
            transform: scale(0.95);
            background: linear-gradient(135deg, #45a049, #3d8b40);
          }

          .refresh-icon {
            font-size: 18rpx;
            transition: transform 0.3s ease;

            &.rotating {
              animation: rotate 1s linear infinite;
            }
          }

          .refresh-text {
            font-size: 22rpx;
          }
        }
      }
    }
  }
}

.delivery-progress {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
  z-index: 2;

  .progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;

    .progress-dot {
      width: 22rpx;
      height: 22rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      margin-bottom: 12rpx;
      transition: all 0.3s ease;
    }

    .progress-text {
      font-size: 24rpx;
      white-space: nowrap;
      opacity: 0.9;
    }

    .progress-time {
      font-size: 28rpx;
      color: #fff;
      opacity: 0.85;
      margin-top: 8rpx;
    }

    &.active {
      .progress-dot {
        background-color: #fff;
        box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.6);
        transform: scale(1.1);
      }

      .progress-text {
        font-weight: 500;
        opacity: 1;
      }
    }
  }
}

.progress-line {
  flex: 1;
  height: 2rpx;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 10rpx;
  position: relative;
  z-index: 1;
  top: -10rpx;

  &.active {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

.delivery-section,
.order-section,
.merchant-section,
.price-section {
  background-color: #fff;
  border-radius: 24rpx;
  margin: 24rpx;
  padding: 36rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.99);
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
    border-radius: 6rpx;
  }
}

.delivery-address {
  display: flex;

  .address-icon {
    margin-right: 20rpx;
    font-size: 42rpx;
    color: #ff6b6b;
    opacity: 0.9;
  }

  .address-info {
    flex: 1;

    .address-header {
      display: flex;
      margin-bottom: 12rpx;

      .address-name {
        font-size: 30rpx;
        font-weight: 600;
        margin-right: 20rpx;
        color: #333;
      }

      .address-phone {
        font-size: 28rpx;
        color: #999;
        background-color: #f8f8f8;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
    }

    .address-detail {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.order-info {
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22rpx;

    .info-label {
      font-size: 28rpx;
      color: #999;
    }

    .info-value,
    .info-value-copy {
      font-size: 28rpx;
      color: #333;
    }

    .info-value-copy {
      display: flex;
      align-items: center;

      .copy-btn {
        font-size: 24rpx;
        color: #ff6b6b;
        margin-left: 12rpx;
        background-color: rgba(255, 107, 107, 0.08);
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.95);
          background-color: rgba(255, 107, 107, 0.12);
        }
      }
    }
  }
}

.merchant-info {
  display: flex;
  align-items: center;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f8f8f8;

  .merchant-logo {
    width: 70rpx;
    height: 70rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .merchant-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
  }
}

.goods-list {
  padding: 24rpx 0;
}

.goods-item {
  display: flex;
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .goods-image {
    width: 130rpx;
    height: 130rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    object-fit: cover;
  }

  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .goods-name {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 12rpx;
      font-weight: 500;
    }

    .goods-specs {
      font-size: 24rpx;
      color: #999;
      background-color: #f9f9f9;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      display: inline-block;
    }
  }

  .goods-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    .goods-quantity {
      font-size: 26rpx;
      color: #999;
      margin-bottom: 10rpx;
    }

    .goods-price {
      font-size: 30rpx;
      color: #333;
      font-weight: 600;
    }
  }
}

.price-section {
  .price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18rpx;
    font-size: 28rpx;
    color: #666;

    .discount {
      color: #ff6b6b;
      font-weight: 500;
    }
  }

  .price-total {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    padding-top: 24rpx;
    border-top: 2rpx solid #f8f8f8;
    font-size: 28rpx;

    .total-price {
      font-size: 34rpx;
      color: #ff6b6b;
      font-weight: 600;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.98);
  padding: 24rpx 30rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  backdrop-filter: blur(10rpx);
  border-radius: 30rpx 30rpx 0 0;

  .action-btns {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20rpx;

    .action-btn {
      margin-left: 16rpx;
      font-size: 28rpx;
      padding: 16rpx 40rpx;
      border-radius: 40rpx;
      line-height: 1.4;
      transition: all 0.3s ease;

      // 取消订单按钮
      &:nth-child(1) {
        background-color: #fff;
        border: 1px solid #ff6b6b;
        color: #ff6b6b;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.1);

        &:active {
          background-color: rgba(255, 107, 107, 0.05);
        }
      }

      // 去支付按钮
      &:nth-child(2) {
        background: linear-gradient(to right, #ff9a9e, #ff6b6b);
        color: #fff;
        border: none;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.2);

        &:active {
          box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.15);
        }
      }

      // 确认收货按钮
      &[v-if*="status === 3"] {
        background-color: #1989fa;
        color: #fff;
        border: none;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.2);

        &:active {
          background-color: #0076e4;
        }
      }

      // 再来一单按钮
      &.primary {
        background: linear-gradient(to right, #ff9a9e, #ff6b6b);
        color: #fff;
        border: none;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.2);

        &:active {
          box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.15);
        }
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>